<template>
	<view class="footprint-wrapper">
		<view class="clear-footprint" @click="removeAll">清空浏览记录</view>
		<view class="footprint-container">
			<view v-if="searchList.length>0">
				<block >
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item, index) in searchList" :key='index' :options="options" @click="del(item)"  >
							<view :class="item.type === '专家' ? 'item item1' : 'item item2'" @click="toDetail(item)">
								<image class="img-url" :src="item.imgUrl"></image>
								<view class="right-wrapper">
									<text class="note">{{item.note}}</text>
									<text class="time">{{item.createDate}}</text>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>

				</block>
			</view>
			<view v-if="parseFloat(total)===0">
				<view class="sysNodata">
					<image src="../../static/nomorepro.png" mode=""></image>
					<view class="sysNodataTitle">
						暂无相关数据
					</view>
				</view>
			</view>
			<view class="sysBottomShow" v-if="isShowBottom&&parseFloat(total)!=0&&searchList.length>4">
				我是有底线的
			</view>
		</view>
	</view>
</template>

<script>
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				pageSize: 20,
				pageNum: 1,
				isShowBottom: false,
				searchList: [],
				total: -1,
				options: [{
					text: '删除记录',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
			}
		},
		methods: {
			toDetail(item) {
				if (item.type === '活动') {
					uni.navigateTo({
						url: '/pages/activity-detail/activity-detail?scene=' + item.mainId
					});
				} else if (item.type === '需求') {
					// uni.navigateTo({
					// 	url: '/pages/expert-detail/expert-detail?scene='+item.mainId
					// });
				} else if (item.type === '项目技术') {
					uni.navigateTo({
						url: '/pages/project-detail/project-detail?scene=' + item.mainId
					});
				} else if (item.type === '专家') {
					uni.navigateTo({
						url: '/pages/expert-detail/expert-detail?scene=' + item.mainId
					});
				} else if (item.type === '服务') {
					// uni.navigateTo({
					// 	url: '/pages/expert-detail/expert-detail?scene='+item.mainId
					// });
				} else if (item.type === '经纪人') {
					// uni.navigateTo({
					// 	url: '/pages/expert-detail/expert-detail?scene='+item.mainId
					// });
				}
			},
			removeAll() {
				if(!permissionJudge('user:history:delete')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				let that = this;
				uni.showModal({
					title:"提示",
					content:"确认清空浏览记录吗？",
					success:function(res){
						if(res.confirm)
						{
							that.$request.get({
								url: 'userBrower/delete',
								data: {
									id: 'all'
								},
							}).then(res => {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
								that.searchMyFootPrint();
							})
						}
					},
				})
			},
			searchMyFootPrint() {
				uni.showLoading({
					title:'加载中'
				});
				this.$request.get({
					url: 'userBrower/selectAll',
					data: {
						pageSize: this.pageSize,
						pageNum: this.pageNum,
					},
					force: false
				}).then(res => {
					uni.hideLoading();
					let array = res.list;
					this.total = res.total
					if (this.pageNum === 1) {
						this.searchList = [];
					}
					for (let i = 0; i < array.length; i++) {
						this.searchList.push(array[i])
					}
					if (this.pageSize * this.pageNum >= res.total) {
						this.isShowBottom = true;
					}
					uni.stopPullDownRefresh();

				})
			},
			del(item) {
				let that = this;
				uni.showModal({
					title:"提示",
					content:"确认删除本条记录吗？",
					success:function(res){
						if(res.confirm)
						{
							that.$request.get({
								url: 'userBrower/delete',
								data: {
									id: item.id
								},
							}).then(res => {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
								let temp = that.searchList.findIndex(function(v){
									return v.id == item.id;
								});
								that.searchList.splice(temp,1)
							})
						}
					}
				})
			},

		},
		/**
		 * @description 页面初始化加载数据
		 */
		onLoad() {
			this.searchMyFootPrint()
		},
		/**
		 * @description 下拉刷新
		 */
		onPullDownRefresh() {
			this.pageNum = 1;
			this.isShowBottom = false;
			this.searchMyFootPrint();
		},
		/**
		 * @description 触底事件
		 */
		onReachBottom() {
			if (this.isShowBottom) {
				console.log('触底了！');
			} else {
				this.pageNum++;
				this.searchMyFootPrint();
			}
		}
	}
</script>

<style scoped lang="less">
	.footprint-wrapper {
		background: #F5F6F9;
		.clear-footprint {
			width: 100%;
			height: 84upx;
			font-size: 26upx;
			color: #2A7DFA;
			line-height: 84upx;
			text-align: right;
			padding-right: 30upx;
			// position: fixed;
			// left: 0;
			// top: 0;
		}

		.footprint-container {
			.no-data {
				// height: calc(100vh - 85upx);
				// display: flex;
				// justify-content: center;
				// align-items: center;
			}

			// padding-top: 85upx;
			.item {
				width: 100%;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				margin-bottom: 16upx;
			}

			// 专家样式
			.item1 {
				height: 226upx;
				padding-left: 90upx;

				.img-url {
					width: 135upx;
					height: 135upx;
					border-radius: 50%;
					margin-right: 36upx;
				}

				.right-wrapper {
					display: flex;
					flex-direction: column;
					flex: .9;

					.note {
						font-size: 30upx;
						color: #222222;
						font-weight: 500;
					}

					.time {
						font-size: 24upx;
						color: #A0A0A0;
					}
				}
			}

			// 其余样式
			.item2 {
				height: 230upx;
				padding-left: 30upx;

				.img-url {
					width: 240upx;
					height: 150upx;
					margin-right: 30upx;
				}

				.right-wrapper {
					display: flex;
					flex-direction: column;
					flex: .9;

					.note {
						font-size: 30upx;
						color: #222222;
						font-weight: 500;
					}

					.time {
						font-size: 24upx;
						color: #222222;
					}
				}
			}
		}
	}
</style>
